<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>LBCbootstrap</title>
        <meta charset="utf-8"> 
        <link rel="stylesheet" media="screen and (min-width :1200px)" href="lbcw.css" />
        <link rel="stylesheet" media="screen and (min-width :970px) and (max-width :1200px)" href="lbcx.css" />
        <link rel="stylesheet" media="screen and (min-width :768px) and (max-width :970px)" href="lbcy.css" />
        <link rel="stylesheet" media="screen and (max-width :768px)" href="lbcz.css" />   
        <link rel="stylesheet" href="font_dpphp2ia00m/iconfont.css">
    </head>
    <body>
        <div class="minw header">
            <div class="wauto header-cen">
                <div class="header-left">
                <a href="#">Bootstrap中文网</a>
                <button>
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <div class="header-left-list">
                    <a href="#">Bootstrap2中文文档</a>
                    <a href="#">Bootstrap3中文文档</a>
                    <a href="#">Bootstrap4中文文档</a>
                    <a href="#">Less 教程</a>
                    <a href="#">jQuery API</a>
                    <a href="#">网站实例</a>
                </div>
               </div>
                <div class="header-right">
                    <a href="#">关于</a>
                </div>              
            </div>
        </div>

        <!-- 上方的图形区域 -->
        <div class="minw head">
            <div class="head-bgimg">
            <div class="wauto head-zong">
                 <div class="head-space"></div>
                 <div class="head-up"><span>Bootstrap</span></div>
                 <div class="head-mid"><span>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</span></div>
                 <div class="head-cen"><a href="#">Bootstrap3中文文档(v3.3.7)</a></div>
                 <div class="head-down"><a>Bootstrap2中文文档(v2.3.2)</a></div>
            </div>
            </div>
        </div>
        <!-- 图形区域下的灰框框 -->
        <div class="minw head-hui">
            <div class="wauto">
                 <div class="head-conti">
                     <a href="#"><span class="icon iconfont icon-zhishiwenda"></span>Bootstrap问答社区&nbsp;&nbsp;</a>
                     <a href="#"><span class="icon iconfont icon-weibo1"></span>新浪微博：@Bootstrap中文网</a>
                 </div>
            </div>
        </div>
       
        <!-- 正文的第一行字 -->
        <div class="minw">
            <div class="wauto main-head-zi">
                <div class="wauto main-head-zi1"><span>Bootstrap相关优质项目推荐</span></div>
                <div class="wauto main-head-zi2"><span>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</span></div>
                <div class="main-head-zi-line"></div>
            </div>
        </div>
        
        <!-- 主体图片内容 -->
        <div class="minw">
            <div class="wauto">
            <div class="main-pic">
                <div>
                    <div class="main-pic-img"><img src="lbc/1.png" alt="Bootstrap 优站精选" title="Bootstrap 优站精选"></div>
                    <div class="main-pic-aup"><a href="#" title="Bootstrap 优站精选">优站精选</a></div>
                    <div class="main-pic-ado"><a href="#" title="Bootstrap 优站精选">Bootstrap 网站实例</a></div>
                    <div class="main-pic-span"><span>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</span></div>                    
                </div>
                <div>
                    <div class="main-pic-img"><img src="lbc/2.png" alt="" title="Webpack 是前端资源模块化管理和打包工具"></div>
                    <div class="main-pic-aup"><a href="#" title="Webpack 是当下最热门的前端资源模块化管理和打包工具">Webpack</a></div>
                    <div class="main-pic-ado"><a href="#" title="Webpack 是当下最热门的前端资源模块化管理和打包工具">是前端资源模块化管理和打包工具</a></div>
                    <div class="main-pic-span"><span>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/3.png" alt="" title=" React - 用于构建用户界面的 JavaScript 框架"></div>
                        <div class="main-pic-aup"><a href="#" title=" React - 用于构建用户界面的 JavaScript 框架">React</a></div>
                        <div class="main-pic-ado"><a href="#" title=" React - 用于构建用户界面的 JavaScript 框架">用于构建用户界面的 JavaScript 框架</a></div>
                        <div class="main-pic-span"><span>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/4.png" alt="优站实例" title="TypeScript 中文手册"></div>
                        <div class="main-pic-aup"><a href="#" title="TypeScript 中文手册">TypeScript 中文手册</a></div>
                        <div class="main-pic-ado"><a href="#" title="TypeScript 中文手册">Bootstrap 网站实例</a></div>
                        <div class="main-pic-span"><span>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</span></div>
                </div> 
                <div>
                        <div class="main-pic-img"><img src="lbc/5.png" alt="jQuery API 中文文档/手册" title="jQuery API 中文文档/手册"></div>
                        <div class="main-pic-aup"><a href="#" title="jQuery API 中文文档/手册">jQuery API</a></div>
                        <div class="main-pic-ado"><a href="#" title="jQuery API 中文文档/手册">中文文档</a></div>
                        <div class="main-pic-span"><span>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/6.png" alt="Next.js 是一个轻量级的 React 服务端渲染应用框架。" title="Next.js 是一个轻量级的 React 服务端渲染应用框架。"></div>
                        <div class="main-pic-aup"><a href="#" title="Next.js 是一个轻量级的 React 服务端渲染应用框架。">Next.js</a></div>
                        <div class="main-pic-ado"><a href="#" title="Next.js 是一个轻量级的 React 服务端渲染应用框架。">中文文档</a></div>
                        <div class="main-pic-span"><span>Next.js 是一个轻量级的 React 服务端渲染应用框架。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/7.png" alt="Babel 是一个 JavaScript 编译器。" title="Babel 是一个 JavaScript 编译器。"></div>
                        <div class="main-pic-aup"><a href="#" title="Babel 是一个 JavaScript 编译器。">Babel</a></div>
                        <div class="main-pic-ado"><a href="#" title="Babel 是一个 JavaScript 编译器。">是一个 JavaScript 编译器。</a></div>
                        <div class="main-pic-span"><span>Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/8.png" alt="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。"></div>
                        <div class="main-pic-aup"><a href="#" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。">Node.js</a></div>
                        <div class="main-pic-ado"><a href="#" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。">是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</a></div>
                        <div class="main-pic-span"><span></span></div>
                </div>             
                <div>
                        <div class="main-pic-img"><img src="lbc/9.png" alt="Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。" title="Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。"></div>
                        <div class="main-pic-aup"><a href="#" title="Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。">Yarn</a></div>
                        <div class="main-pic-ado"><a href="#" title="Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。">是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。</a></div>
                        <div class="main-pic-span"><span></span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/10.png" alt="NPM 中文文档" title="NPM 中文文档"></div>
                        <div class="main-pic-aup"><a href="#" title="NPM 中文文档"> NPM</a></div>
                        <div class="main-pic-ado"><a href="#" title="NPM 中文文档">中文文档</a></div>
                        <div class="main-pic-span"><span>NPM（node package manager）是 Node.js 世界的包管理器。NPM 可以让 JavaScript 开发者在共享代码、复用代码以及更新共享的代码上更加方便。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/11.png" alt="Vue.js - 渐进式 JavaScript 框架" title="Vue.js - 渐进式 JavaScript 框架"></div>
                        <div class="main-pic-aup"><a href="#" title="Vue.js - 渐进式 JavaScript 框架">Vue.js</a></div>
                        <div class="main-pic-ado"><a href="#" title="Vue.js - 渐进式 JavaScript 框架">中文文档。</a></div>
                        <div class="main-pic-span"><span>Vue.js - 是一套构建用户界面的渐进式框架。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/12.png" alt="Svelte" title="Svelte"></div>
                        <div class="main-pic-aup"><a href="#" title="Svelte">Svelte</a></div>
                        <div class="main-pic-ado"><a href="#" title="Svelte">中文网</a></div>
                        <div class="main-pic-span"><span>Svelte 是构建 Web 应用程序的一种新方法。Svelte 是一个编译器，它将声明性组件转换成高效的 JavaScript 代码，并像做外科手术一样细粒度地更新 DOM。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/13.png" alt="Browsersync 浏览器同步测试工具" title="Browsersync 浏览器同步测试工具"></div>
                        <div class="main-pic-aup"><a href="#" title="Browsersync 浏览器同步测试工具">Browsersync</a></div>
                        <div class="main-pic-ado"><a href="#" title="Browsersync 浏览器同步测试工具">浏览器同步测试工具</a></div>
                        <div class="main-pic-span"><span>Browsersync 浏览器同步测试工具，很容易与 Web 平台、构建工具和其他 Node.js 项目集成，替代了大量重复测试劳动。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/14.png" alt="Parcel - 极速、零配置的 web 应用打包工具。" title="Parcel - 极速、零配置的 web 应用打包工具。"></div>
                        <div class="main-pic-aup"><a href="#" title="Parcel - 极速、零配置的 web 应用打包工具。">Parcel</a></div>
                        <div class="main-pic-ado"><a href="#" title="Parcel - 极速、零配置的 web 应用打包工具。">中文文档</a></div>
                        <div class="main-pic-span"><span>Parcel - 极速、零配置的 web 应用打包工具。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/15.png" alt="Lodash 是最流行的 JavaScript 工具库。" title="Lodash 是最流行的 JavaScript 工具库。"></div>
                        <div class="main-pic-aup"><a href="#" title="Lodash 是最流行的 JavaScript 工具库。">Lodash</a></div>
                        <div class="main-pic-ado"><a href="#" title="Lodash 是最流行的 JavaScript 工具库。">JavaScript 工具库</a></div>
                        <div class="main-pic-span"><span>Lodash 是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。比相同功能的 Underscore.js 使用更广泛。</span></div>
                </div>
                <div>
                        <div class="main-pic-img"><img src="lbc/16.png" alt="Pro Git 中文版（第二版）让你从 Git 初学者成为 Git 专家" title="Pro Git 中文版（第二版）让你从 Git 初学者成为 Git 专家"></div>
                        <div class="main-pic-aup"><a href="#" title="Pro Git 中文版（第二版）让你从 Git 初学者成为 Git 专家">Pro Git</a></div>
                        <div class="main-pic-ado"><a href="#" title="Pro Git 中文版（第二版）让你从 Git 初学者成为 Git 专家">Git 入门到专家指南</a></div>
                        <div class="main-pic-span"><span>Pro Git 中文版（第二版）是一本详细的 Git 指南，主要介绍了 Git 的使用基础和原理，让你从 Git 初学者成为 Git 专家。</span></div>
                </div>
            </div>    
            </div>
        </div>

        <!-- 加段空白 -->
        <div class="minw">
            <div class="wauto">
                <div class="footer-space"></div>
            </div>
        </div>
        
        <!-- 底部tab栏 -->
        <div class="minw">
            <div class="wauto footer">
                <div class="footer-left">
                      <img src="lbc/f1.png" alt="">
                      <span>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</span>
                </div>
                <div class="footer-right">
                    <div>
                        <span>关于</span>
                        <a href="#">关于我们</a>
                        <a href="#">广告合作</a>
                        <a href="#">友情链接</a>
                        <a href="#">招聘</a>
                    </div>
                    <div>
                        <span>联系方式</span>
                        <a href="#">新浪微博</a>
                        <a href="#">电子邮件</a>
                    </div>                   
                    <div>
                        <span>旗下网站</span>
                        <a href="#">Laravel中文网</a>
                        <a href="#">Ghost中国</a>
                        <a href="#">BootCDN</a>
                        <a href="#">Packagist中国镜像</a>
                    </div>
                    <div>
                        <span>特别致谢</span>
                        <a href="#">猫云</a>
                        <a href="#">京东云</a>
                        <a href="#">又拍云</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部版权字 -->
        <div class="foot-space"></div>
        <div class="minw">
            <div class="wauto foot-copy">
                <a href="#">&copy;京ICP备11008151号-6&nbsp;&nbsp;</a>
                <span>京公网安备11010802014853</span>
            </div>
        </div>

        


    </body>
</html>